<!--
 * 删除员工弹窗
-->
<template>
  <el-dialog
    title="删除员工"
    :visible.sync="dialogData.show"
    width="520px"
    append-to-body
  >
    <div class="dialog-root">
      <p
        style="font-size: 20px; font-weight: bold; margin: 0; color: #ff000dff"
      >
        {{ "确认要删除该员工吗？" }}
      </p>
      <div class="content-root" style="margin-top: 16px">
        <div class="line-between" style="margin-top: 16px">
          <span style="color: #777e8aff; font-size: 14px">员工名称</span>
          <span style="color: #030617d9; font-size: 14px">{{
            dialogData.name
          }}</span>
        </div>
        <div class="line-between" style="margin-top: 16px">
          <span style="color: #777e8aff; font-size: 14px">性别</span>
          <span style="color: #030617d9; font-size: 14px">{{
            dialogData.genderName
          }}</span>
        </div>
        <div class="line-between" style="margin-top: 16px">
          <span style="color: #777e8aff; font-size: 14px">手机号</span>
          <span style="color: #030617d9; font-size: 14px">{{
            dialogData.dialCode + " " + dialogData.phoneContent
          }}</span>
        </div>
        <div class="line-between" style="margin-top: 16px">
          <span style="color: #777e8aff; font-size: 14px">所属部门</span>
          <span style="color: #030617d9; font-size: 14px">{{
            dialogData.department
          }}</span>
        </div>
        <div class="line-between" style="margin-top: 16px">
          <span style="color: #777e8aff; font-size: 14px">所属角色</span>
          <span style="color: #030617d9; font-size: 14px">{{
            dialogData.roleName
          }}</span>
        </div>
      </div>
      <div class="line-center">
        <el-button class="dialog-btn" @click="dialogCancel" plain
          >取消</el-button
        >
        <el-button
          class="dialog-btn"
          style="margin-left: 8px"
          @click="dialogConfirm"
          type="danger"
          v-preventReClick
          >确认</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
//接口
import { delStaff } from "@/api/staff_role";

export default {
  props: {
    dialogData: {
      type: Object,
    },
  },
  data() {
    return {
      floorPoints: [],
      pointerList: [],
      mapPicUrl: "",
    };
  },
  watch: {
    "dialogData.show": {
      immediate: true,
      handler: function (val, oldVal) {
        if (val) {
        }
      },
    },
  },
  methods: {
    //关闭弹窗,仅关闭
    closeDialog() {
      this.dialogData.show = false;
    },
    //取消按钮
    dialogCancel() {
      this.dialogData.show = false;
    },
    //确认按钮
    dialogConfirm() {
      //删除
      this.handleDelLang();
    },
    //删除语言
    handleDelLang() {
      delStaff({
        id: this.dialogData.id,
      })
        .then((response) => {
          this.$message.success("删除成功");
          this.$emit("dialogConfirm");
          this.dialogData.show = false;
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__title {
    font-weight: normal;
  }
}

.dialog-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.content-root {
  width: 100%;
  padding: 16px;
  padding-top: 0;
  background: #fbfbfc;
  border-radius: 8px;
}

.line-between {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.line-center {
  width: 100%;
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.dialog-btn {
  height: 32px;
  width: 120px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
</style>